<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-bind指令：动态使用数据绑定标签元素的属性-->
        <h1 id="h1Id" class="box" v-bind:title="tit">这是一个大大地h1</h1>
        <!-- 简略写法 英文地 ： -->
        <h2 :title="tit">这是一个稳重地h1</h2>
        <!-- 拼接写法 -->
        <h1 :title="tit+'的拼接'">这是h1</h1>

        <img :src="imgUrl" alt="图片资源错误">
    </div>
</body>

</html>
<script src="js/vue3.4.21.js"></script>
<script>
    const {
        createApp,
        ref
    } = Vue
    createApp({
        setup() {
            const tit = ref("一级标题")
            const imgUrl = ref("img/1.png")
            return {
                tit,
                imgUrl
            }
        }
    }).mount("#app")
</script>